<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Traffic Lights</title>
    <link rel="stylesheet" href="../assets/css/trafficLights.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <div class="container">
        <div class="circle red" data-color="red"><span class="tooltip1">Hold On <i
                    class="fa fa-hand-paper-o"></i></span></div>
        <div class="circle" data-color="yellow"><span class="tooltip2">Breathe In <i
                    class="fa fa-exclamation-triangle"></i></span></div>
        <div class="circle" data-color="green"><span class="tooltip3">Let Go <i class="fa fa-taxi"></i></span></div>
    </div>
    <div class="stick"></div>
    <div class="base"></div>

    <script src="../assets/js/TrafficLights.js"></script>
</body>

</html>